<template>
  <div id="one">
    <div class="gong">
      <img
        :src="topImg"
        alt=""
      />
    </div>
    <h2>{{type}}</h2>
    <div class="one-content">
        <div class="left1" v-if="leftImg.length == 1">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb1bd61ad71c45a4f67f09b075463944.jpeg?thumb=1&w=293&h=768&f=webp&q=90" alt="">
        </div>
        <div class="left2" v-if="leftImg.length == 2">
            <img :src="item" alt="" v-for="item in leftImg" :key="item">
          
        </div>
        <div class="rigth">
            <div class="item" v-for="(item,i) in list" :key="item.product_id || i">
                <div class="im">
                    <img :src=" item.img || ('http://47.115.85.237:3000/' + item.product_picture) " alt="">
                </div>
                <div class="wenzi">
                    <p class="name">{{item.name || item.product_name}}</p>
                    <p class="info">{{item.desc || item.product_title}}</p>
                    <p class="price"> {{item.price || item.product_selling_price}} 元</p>
                </div>
            </div>
            <div class="item">
                <h2 style="text-align:center;line-height:250px">查看更多》</h2>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "one",
  props : {
      type : {
          type : String,
          default : '手机'
      },
      topImg : {
          type : String,
          default : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/431e5fd6bfd1b67d096928248be18303.jpg?thumb=1&w=1533&h=150&f=webp&q=90'
      },
      leftImg : {
          type : Array,
          default : ()=>{
            return  ['https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb1bd61ad71c45a4f67f09b075463944.jpeg?thumb=1&w=293&h=768&f=webp&q=90']
          }
      },
      list : {
          type : Array ,
           default : ()=>{
               return []
           }
      }
  },
  //组件
  components: {},
  //数据
  data() {
    return {};
  },
  //挂载后
  mounted() {},
  //方法
  methods: {},
  //过滤，筛选
  filters: {},
  //计算
  computed: {},
  //监听
  watch: {
    //被监听者名称
    $route: {
      //是否一进入页面就开始监听
      immediate: false,
      //执行函数
      handler(newVal, oldVal) {},
      //是否深度监听
      deep: false,
    },
  },
};
</script>

<style lang='scss' scoped>
#one {
  overflow: hidden;
  width: 100%;
  height: auto;
}
.gong {
  margin-top: 20px;
  width: 100%;
  img {
    width: 100%;
  }
}
.one-content{
    .left1{
        float: left;
        width: 234px;
        height: 614px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .left2{
        float: left;
        width: 234px;
        height: 614px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        img{
            width: 100%;
            height: 300px;
        }
    }
    .rigth{
        display: flex;
        flex-wrap: wrap;    
        height: 614px;
        padding-left: 14px;
        justify-content: space-between;
        align-content: space-between;
        .item{
            width: 226px;
            height: 300px;
            background-color: #fff;
            .im{
                width: 70%;
                margin: 2px auto;
                img{
                    width: 100%;

                }
            }
            .wenzi{
                padding: 20px;
                font-size: 14px;
                p{
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .info{
                    color: #BCBCBC;
                    font-size: 12px;
                    margin: 10px 0;
                }
                .price{
                    margin: 10px 0;
                    color: orangered;
                    font-size: 16px;
                }
            }
        }
    }
}
</style>
